<template>
  <div class="item flex-row-center-between pd16 br4">
    <div class="flex-row-center-between flex1">
      <div class="flex-row-center-between flex1">
        <span class="bold flex1">{{ props.index }}</span>
        <span class="bold flex1">{{ props.data?.name }}</span>
      </div>
      <div class="flex1 flex-column gap10">
        <span>当月新增故障{{ v('monthRaiseFault') }}个</span>
        <span class="grey-text">(分布在{{ k('monthRaiseFault') }}家客户)</span>
      </div>

      <div class="flex1 flex-column gap10">
        <span>当月修复故障{{ v('monthRepairFault') }}个</span>
        <span class="grey-text">(分布在{{ k('monthRepairFault') }}家客户)</span>
      </div>

      <div class="flex1">
        <div>当月修复率</div>
        <div class="bold count fs28">{{ props.data?.monthRate }}</div>
      </div>
    </div>

    <div>
      <el-divider style="height: 40px" direction="vertical" />
    </div>

    <div class="flex1 flex-row-center-between">
      <div class="flex1 flex-column-right-center gap10">
        <span>剩余修复故障{{ v('repairingFault') }}个</span>
        <span class="grey-text">(分布在{{ k('repairingFault') }}家客户)</span>
      </div>

      <div class="flex1 flex-column-right-center gap10">
        <span>累计修复故障{{ v('totalRepairFault') }}个</span>
        <span class="grey-text">(分布在{{ k('totalRepairFault') }}家客户)</span>
      </div>

      <div class="flex1 flex-column-right-center gap10">
        <span>总修复率</span>
        <span class="bold count fs28">{{ props.data?.totalRate }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import type { FaultRepairTopVO } from '../config'

  const props = defineProps({
    data: Object as PropType<FaultRepairTopVO>,
    index: Number
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const k = (key: keyof FaultRepairTopVO) => {
    const [k] = Object.keys(props.data![key])
    return k
  }

  const v = (key: keyof FaultRepairTopVO) => {
    const [v] = Object.values(props.data![key])
    return v
  }
</script>

<style scoped lang="less">
  .item {
    background: #f6f7fb;
    .red {
      color: #d92329;
    }
    .count {
      color: #3e72eb;
    }
  }
</style>
